import React from 'react';
import './1.3-Practice.css';

class Demo extends React.Component {
  // constructor(props) {
  //   super(props);
  //   console.log(this.b)
  // }

  // static a = 456
  // b = 123

  // componentWillUnmount(){
  //   console.log('销毁了')
  // }

  // onClick = () => {
  //   console.log(this)
  //   alert('click')
  // }

  state = {
    type : 0  //1奇数 2偶数 0重置
  }

  onChangeType = (type) => {
    this.setState({ type : type });
  }


  render() {
    const {type} = this.state;
    const list = [2, 4, 6, 8, 10];
    return <React.Fragment>
      <>
        <button onClick={() => this.onChangeType(1)}>奇数行加深</button>
        <button onClick={() => this.onChangeType(2)}>偶数行加深</button>
        <button onClick={() => this.onChangeType(0)}>重置</button>
        {list.map((item, index)=>{
          let className = 'line'
          if(type === 1 && !!((index+1)%2)) {
            className += ' deep-style'
          }

          if(type === 2 && !!((index)%2)){
            className += ' deep-style'
          }

          return (
            <p key={index} className={className}>{item}</p> 
          )
        })}
      </>
      {/* <div onClick={this.onClick}>点我</div> */}
    </React.Fragment>
  } 
}
  
//函数式
function demo(){
  const list = [2, 4, 6, 8, 10];
  return (
    list.map((item, index)=>{
      const isEven = index % 2 === 0 ? 'even-style' : ''
      return (
        <p key={index} className={`line ${isEven}`}>{item}</p> 
      )
    })
  )
}

export default Demo;
